<template>
  <view class="container">
    <!-- 左侧边栏 -->
    <view class="sidebar">
      <view
        v-for="(category, index) in categoryList"
        :key="index"
        class="category-item"
        @click="selectCategory(category)"
      >
        {{ category.name }}
      </view>
    </view>
    <!-- 右侧可以用来展示对应分类景点列表等内容的区域 -->
    <view class="main-content">
      <view v-if="selectedCategory.name === '自然'">
        <view
          v-for="(scenicSpot, spotIndex) in naturalScenicSpots"
          :key="spotIndex"
          class="scenic-spot-item"
        >
          <image :src="scenicSpot.image" class="spot-image" mode="aspectFit"></image>
          <text class="spot-name">{{ scenicSpot.name }}</text>
          <text class="spot-description">{{ scenicSpot.description }}</text>
        </view>
      </view>
      <view v-else-if="selectedCategory.name === '历史'">
        <view
          v-for="(scenicSpot, spotIndex) in historicalScenicSpots"
          :key="spotIndex"
          class="scenic-spot-item"
        >
          <image :src="scenicSpot.image" class="spot-image" mode="aspectFit"></image>
          <text class="spot-name">{{ scenicSpot.name }}</text>
          <text class="spot-description">{{ scenicSpot.description }}</text>
        </view>
      </view>
      <view v-else-if="selectedCategory.name === '现代'">
        <view
          v-for="(scenicSpot, spotIndex) in modernEntertainmentScenicSpots"
          :key="spotIndex"
          class="scenic-spot-item"
        >
          <image :src="scenicSpot.image" class="spot-image" mode="aspectFit"></image>
          <text class="spot-name">{{ scenicSpot.name }}</text>
          <text class="spot-description">{{ scenicSpot.description }}</text>
        </view>
      </view>
      <view v-else-if="selectedCategory.name === '古迹'">
        <view
          v-for="(scenicSpot, spotIndex) in famousHistoricalScenicSpots"
          :key="spotIndex"
          class="scenic-spot-item"
        >
          <image :src="scenicSpot.image" class="spot-image" mode="aspectFit"></image>
          <text class="spot-name">{{ scenicSpot.name }}</text>
          <text class="spot-description">{{ scenicSpot.description }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { Static } from 'vue';

  export default {
    data() {
      return {
        categoryList: [
          { name: "自然" },
          { name: "历史" },
          { name: "现代" },
          { name: "古迹" }
        ],
        selectedCategory: { name: "自然类" },
        naturalScenicSpots: [
          {
            name: "兴庆公园",
            description: "兴庆公园的郁金香花海",
			image: "/static/ziran/1.jpg"

          },
          {
            name: "金龙峡",
            description: "4A级景观",
            image: "/static/ziran/2.jpg"
          },
          {
            name: "运动公园",
            description: "西安运动公园",
            image: "/static/ziran/3.jpg"
          }
        ],
        // 历史人文类景点
		
        historicalScenicSpots: [
          {
            name: "陕西历史博物馆",
            description: "位于陕西省西安市雁塔区。 筹建于1983年，1991年6月20日对外开放。 2008年3月27日开始免费向公众开放。 是 国家一级博物馆 、国家AAAA级旅游景点、 陕西省社会科学普及基地。",
            image: "/static/lishi/4.jpg"
          },
          {
            name: "西安碑林历史博物馆",
            description: "西安碑林于北宋元祐二年（1087年），为保藏唐《开成石经》《石台孝经》及颜真卿、柳宗元等人的书法名碑而兴建，崇宁二年（1103年）迁于现址。经历代维修及增建，规模不断扩大，藏石日益增多，最终建成一座以收藏、研究和陈列历代碑石、墓志及石刻造像为主的专题性艺术博物馆。",
            image: "/static/lishi/5.jpg"
          },
          {
            name: "西安博物院",
            description: "西安博物院，位于陕西省西安市碑林区友谊西路72号，总占地面积约16万平方米，建筑面积1.6万平方米，隶属西安市文物局，是一座集文物收藏、科学研究、社会教育、园林休闲为一体的地方综合性博物馆。 [6] 2007年5月18日，西安博物院正式对外开放。",
            image: "/static/lishi/6.jpg"
          }
        ],
        // 现代娱乐类景点
        modernEntertainmentScenicSpots: [
          {
            name: "生命之树",
            description: "现象级建筑",
            image: "/static/xiandai/7.png"
          },
          {
            name: "赛格",
            description: "赛格国际购物中心汇聚国内外600余家知名品牌，主力购物区域分：名品门店区、精品百货区、品牌 连锁餐饮 区、文化休闲区、中央景观区、地铁 潮店 区，打造以生活、休闲、娱乐为一体的具有国际综合 服务水平 的现代化互动体验式都会型购物中心。",
            image: "/static/xiandai/8.jpg"
          },
          {
            name: "大唐不夜城",
            description: "被国家部委确认为“国家旅游科技示范园区试点”以及“第一批国家级夜间文旅消费集聚区”。",
            image: "/static/xiandai/9.jpg"
          }
        ],
        // 名胜古迹景点
        famousHistoricalScenicSpots: [
          {
            name: "钟楼",
            description: "西安钟楼位于西安市中心，明城墙内东西南北四条大街的交汇处，是中国现存钟楼中形制最大、保存最完整的一座之一 ",
			image: "/static/mingsheng/10.jpg"
            
          },
          {
            name: "鼓楼",
            description: "中国古代遗留下来众多鼓楼中形制最大、保存最完整鼓楼之一。",
            image: "/static/mingsheng/11.jpg"
          },
          {
            name: "西安城墙",
            description: "西安城墙是中国现存规模最大、保存最完整的古代城垣，全长13.7千米，始建于明太祖洪武三年（1370年），洪武十一年（1378年）竣工，是在明太祖“高筑墙、广积粮、缓称王”的政策指导下，在隋、唐皇城的基础上建成的，当时是西安的府城。现在，西安城墙是国家5A级旅游景区",
            image: "/static/mingsheng/12.jpg"
          }
        ]
      };
    },
    methods: {
      selectCategory(category) {
        this.selectedCategory = category;
      }
    }
  };
  
  
  
</script>

<style>
.container {
    display: flex;
    flex-direction: row;
}

.sidebar {
    position: fixed;
    width: 60px; /* 这里给宽度设置一个合理的固定值，比如200px，替换原来错误的'px' */
    background-color: #7b68ee;
    z-index: 500;
    /* 添加以下属性，根据状态控制显示隐藏及过渡效果 */
    transition: all 0.3s ease;
    overflow: hidden;
}

/* 根据侧边栏收起状态添加样式类，用于改变宽度 */
.sidebar.collapsed {
    width: 0;
}

.toggle-sidebar {
    padding: 5px 10px;
    color: white;
    text-align: center;
    cursor: pointer;
}

.category-item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    color: white;
}

.main-content {
    flex: 1;
    padding: 10px;
}

.scenic-spot-item {
    margin-bottom: 10px;
    border: 1px solid #ccc;
    padding: 5px;
}

.spot-name {
    font-weight: bold;
}

.spot-image {
    width: 100%;
    height: 200px;
    margin-bottom: 5px;
}
</style>